<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">
<!-- Copyright � 2005. Spidersoft Ltd -->
<head>

    <meta charset="utf-8"/>

    <title>Metronic | Form Stuff - Form Components</title>

    <meta content="width=device-width, initial-scale=1.0" name="viewport"/>

    <meta content="" name="description"/>

    <meta content="" name="author"/>
    <script src="res/media/js/table-editable.js"></script>
    <script type="text/javascript" src="res/media/js/jquery.dataTables.js"></script>
    <!-- BEGIN PAGE LEVEL STYLES -->
</head>
<style>
    #loader_container {
        text-align: center;
        position: absolute;
        top: 40%;
        width: 100%;
        left: 0;
    }

    #loader {
        font-family: Tahoma, Helvetica, sans;
        font-size: 15px;
        color: #000000;
        background-color: #FFFFFF;
        padding: 10px 0 16px 0;
        margin: 0 auto;
        display: block;
        width: 230px;
        border: 1px solid #5a667b;
        text-align: left;
        z-index: 2;
    }

    #loader_bg {
        background-color: #e4e7eb;
        position: relative;
        top: 8px;
        left: 8px;
        height: 7px;
        width: 213px;
        font-size: 1px;
    }

    #progress {
        height: 5px;
        font-size: 1px;
        width: 1px;
        position: relative;
        top: 1px;
        left: 0px;
        background-color: #77A9E0;
    }

</style>

<!-- BEGIN CONTAINER -->
<!-- BEGIN PAGE -->
<!-- BEGIN SAMPLE PORTLET CONFIGURATION MODAL FORM-->
<!-- BEGIN PAGE TITLE & BREADCRUMB-->
<!-- END PAGE TITLE & BREADCRUMB-->
<!--
<div id="portlet-config" class="modal hide">
    <div class="modal-header">
        <button data-dismiss="modal" class="close" type="button"></button>
        <h3>Widget Settings</h3>
    </div>
    <div class="modal-body">
        Widget settings form goes here
    </div>
</div>
    </div>
       -->
<!-- END SAMPLE PORTLET CONFIGURATION MODAL FORM-->
<!-- END PAGE HEADER-->

<body wicket:id="iris">
<div class="row-fluid">

    <div class="span12">

        <!-- BEGIN PORTLET-->

        <div class="portlet box green">

            <div class="portlet-title">

                <div class="caption"><i class="icon-reorder"></i>Multiple Select</div>

                <div class="tools">

                    <a href="javascript:;" class="collapse"></a>

                    <a href="#portlet-config" data-toggle="modal" class="config"></a>

                    <a href="javascript:;" class="reload"></a>

                    <a href="javascript:;" class="remove"></a>

                </div>

            </div>

            <div class="portlet-body form">

                <!-- BEGIN FORM-->

                <form action="#" class="form-horizontal">

                    <div class="control-group">

                        <label class="control-label">Grouped Options</label>

                        <div class="controls">

                            <select multiple="multiple" id="my_multi_select2" name="my_multi_select2[]">

                                <optgroup label="NFC EAST">

                                    <option>Dallas Cowboys</option>

                                    <option>New York Giants</option>

                                    <option>Philadelphia Eagles</option>

                                    <option>Washington Redskins</option>

                                </optgroup>

                                <optgroup label="NFC NORTH">

                                    <option>Chicago Bears</option>

                                    <option>Detroit Lions</option>

                                    <option>Green Bay Packers</option>

                                    <option>Minnesota Vikings</option>

                                </optgroup>

                                <optgroup label="NFC SOUTH">

                                    <option>Atlanta Falcons</option>

                                    <option>Carolina Panthers</option>

                                    <option>New Orleans Saints</option>

                                    <option>Tampa Bay Buccaneers</option>

                                </optgroup>

                                <optgroup label="NFC WEST">

                                    <option>Arizona Cardinals</option>

                                    <option>St. Louis Rams</option>

                                    <option>San Francisco 49ers</option>

                                    <option>Seattle Seahawks</option>

                                </optgroup>

                            </select>

                        </div>

                    </div>

                </form>

                <!-- END FORM-->

            </div>

        </div>

        <!-- END PORTLET-->

    </div>

</div>

<!--<script src="res/media/js/jquery-1.10.1.min.js" type="text/javascript"></script>

<script src="res/media/js/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>

&lt;!&ndash; IMPORTANT! Load jquery-ui-1.10.1.custom.min.js before bootstrap.min.js to fix bootstrap tooltip conflict with jquery ui tooltip &ndash;&gt;

<script src="res/media/js/jquery-ui-1.10.1.custom.min.js" type="text/javascript"></script>

<script src="res/media/js/bootstrap.min.js" type="text/javascript"></script>

&lt;!&ndash;[if lt IE 9]>

<script src="res/media/js/excanvas.min.js"></script>

<script src="res/media/js/respond.min.js"></script>

<![endif]&ndash;&gt;

<script src="res/media/js/jquery.slimscroll.min.js" type="text/javascript"></script>

<script src="res/media/js/jquery.blockui.min.js" type="text/javascript"></script>

<script src="res/media/js/jquery.cookie.min.js" type="text/javascript"></script>

<script src="res/media/js/jquery.uniform.min.js" type="text/javascript" ></script>-->

<!-- END CORE PLUGINS -->

<!-- BEGIN PAGE LEVEL PLUGINS -->

<!--<script type="text/javascript" src="res/media/js/select2.min.js"></script>

<script type="text/javascript" src="res/media/js/bootstrap-datetimepicker.js"></script>

<script type="text/javascript" src="res/media/js/jquery.inputmask.bundle.min.js"></script>

<script type="text/javascript" src="res/media/js/jquery.input-ip-address-control-1.0.min.js"></script>-->

<script type="text/javascript" src="res/media/js/jquery.multi-select.js"></script>

<!-- END PAGE LEVEL PLUGINS -->

<!-- BEGIN PAGE LEVEL SCRIPTS -->


<!-- END PAGE LEVEL SCRIPTS -->


<!-- END JAVASCRIPTS -->
<!--

<script type="text/javascript">  var _gaq = _gaq || [];  _gaq.push(['_setAccount', 'UA-37564768-1']);  _gaq.push(['_setDomainName', 'keenthemes.com']);  _gaq.push(['_setAllowLinker', true]);  _gaq.push(['_trackPageview']);  (function() {    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;    ga.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'stats.g.doubleclick.net/dc.js';    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);  })();</script>
-->

</body>
</html>


